<template>
  <div class="Kesu">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item>客诉单</el-breadcrumb-item>
      <el-breadcrumb-item>客诉单管理</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="search">
      <el-input
        class="input"
        v-model="input"
        placeholder="请输入关键字"
      ></el-input>
      <el-button
        type="success"
        style="margin-left: 6px"
        icon="el-icon-search"
        @click="searching"
      ></el-button>
    </el-card>
    <br />
    <el-card class="main">
      <el-table
        :data="Kesu.slice((currentPage - 1) * pagesize, currentPage * pagesize)"
        border
        style="width: 100%"
      >
        <el-table-column label="客诉单号">
          <template slot-scope="scope">
            <span>{{ scope.row.ksid }}</span>
          </template>
        </el-table-column>
        <el-table-column label="进仓单号">
          <template slot-scope="scope">
            <span>{{ scope.row.stid }}</span>
          </template>
        </el-table-column>
        <el-table-column label="采购单号">
          <template slot-scope="scope">
            <span>{{ scope.row.pcid }}</span>
          </template>
        </el-table-column>
        <el-table-column label="创建时间">
          <template slot-scope="scope">
            <span>{{ scope.row.opttime }}</span>
          </template>
        </el-table-column>
        <el-table-column label="客诉单" width="220px" align="center">
          <template slot-scope="scope">
            <el-button @click="getDetailKesu(scope.row)" type="primary">
              查看详情
            </el-button>
            <el-button
              size="mini"
              type="danger"
              icon="el-icon-delete"
              @click="deleteById(scope.row.ksid)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <br />
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="currentPage"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="40"
      ></el-pagination>
    </el-card>
    <!-- 客诉单项列表 -->
    <el-dialog
      title="客诉单详情"
      :visible.sync="dialogTableVisible"
      width="70%"
    >
      <el-descriptions direction="vertical" :column="2" border>
        <el-descriptions-item label="客诉单号">{{
          DetailKesu.ksid
        }}</el-descriptions-item>
        <el-descriptions-item label="进仓单号">{{
          DetailKesu.stid
        }}</el-descriptions-item>
        <el-descriptions-item label="采购单号">{{
          DetailKesu.pcid
        }}</el-descriptions-item>
        <el-descriptions-item label="创建时间">{{
          DetailKesu.opttime
        }}</el-descriptions-item>
      </el-descriptions>

      <el-table :data="DetailKesu.kslist">
        <el-table-column label="品牌">
          <template slot-scope="scope">
            <span>{{ scope.row.brand }}</span>
          </template>
        </el-table-column>
        <el-table-column label="纸种">
          <template slot-scope="scope">
            <span>{{ scope.row.type }}</span>
          </template>
        </el-table-column>
        <el-table-column label="级别">
          <template slot-scope="scope">
            <span>{{ scope.row.rank }}</span>
          </template>
        </el-table-column>
        <el-table-column label="克重">
          <template slot-scope="scope">
            <span>{{ scope.row.perweight }}</span>
          </template>
        </el-table-column>
        <el-table-column label="规格">
          <template slot-scope="scope">
            <span>{{ scope.row.guide }}</span>
          </template>
        </el-table-column>
        <el-table-column label="件数">
          <template slot-scope="scope">
            <span>{{ scope.row.buynum }}</span>
          </template>
        </el-table-column>
        <el-table-column label="入仓重量">
          <template slot-scope="scope">
            <span>{{ scope.row.storeweight }}</span>
          </template>
        </el-table-column>
        <el-table-column label="损失重量">
          <template slot-scope="scope">
            <span>{{ scope.row.lossweight }}</span>
          </template>
        </el-table-column>
        <el-table-column label="损失率">
          <template slot-scope="scope">
            <span>{{ 1 - scope.row.losspercentage }}</span>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
import { getAll, deleteByKsid } from "../../network/KesuManage";
import axios from "axios";
export default {
  data() {
    return {
      input: "",
      dialogTableVisible: false,
      DetailKesu: {
        ksid: "",
        stid: "",
        pcid: "",
        opttime: "",
        kslist: [],
      },
      // 客诉单
      Kesu: [
        // {
        //   ksid:"KS0001",
        //   stid:"ST100003",
        //   pcid:"PC116845",
        //   opttime:"2021-4-20 19：30：12",
        //   kslist:[
        //       {
        //           brand:"火火",  //品牌
        //           type:"白卡",  //纸种
        //           rank:"A",  //级别
        //           perweight:"350",  //克重
        //           guide:"1092",  //规格
        //           buynum:3,
        //           storeweight:"1.664",
        //           lossweight:"0.366",
        //           losspercentage:"7.3%",
        //       }
        //   ]
        // }
      ],
      currentPage: 1,
      pagesize: 5,
    };
  },
  created() {
    getAll().then((response) => {
      this.Kesu = response.data.obj;
      for (var i = 0; i < this.Kesu.length; i++) {
        this.Kesu[i].kslist = JSON.parse(this.Kesu[i].kslist);
      }
    });
  },
  methods: {
    searching() {},
    getDetailKesu(kslist) {
      this.dialogTableVisible = true;
      this.DetailKesu = kslist;
    },
    handleSizeChange(val) {
      this.pagesize = val;
    },
    handleCurrentChange(val) {
      this.currentPage = val;
    },
    deleteById(ksid) {
      this.$confirm("确认删除？")
        .then((_) => {
          deleteByKsid({ id: ksid })
            .then((res) => {
              if (res.data.code == "200") {
                this.$message({
                  message: res.data.status,
                  type: "success",
                });
                getAll().then((response) => {
                  this.Kesu = response.data.obj;
                  for (var i = 0; i < this.Kesu.length; i++) {
                    this.Kesu[i].kslist = JSON.parse(this.Kesu[i].kslist);
                  }
                });
              } else {
                this.$message(res.data.status);
              }
            })
            .catch(function (error) {
              console.log(error);
            });
        })
        .catch((_) => {});
    },
  },
};
</script>

<style scoped>
.input {
  width: 30%;
}
.el-breadcrumb {
  margin-bottom: 15px;
  font-size: 12px;
}
.btn {
  margin-left: 880px;
}
.el-table {
  margin-top: 15px;
}
.el-pagination {
  text-align: center;
}
.main,
.search {
  margin-inline: 15px;
  min-height: 100%;
  height: 100%;
}
.head {
  margin-top: 10px;
}
.input {
  width: 300px;
}
.main {
  margin-top: 5px;
}
</style>
